<template>
  <div class="loginPart">
    <div class="title">用户注册</div>
    <el-form
        ref="registerFormRef"
        :model="registerForm"
        :rules="rules"
        aria-autocomplete="off"
        label-width="100px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
            v-model="registerForm.username"
            placeholder="怎么称呼你呢"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
            v-model="registerForm.password"
            placeholder="请输入密码"
            show-password
            type="password"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
            v-model="registerForm.confirmPassword"
            placeholder="请确认密码"
            show-password
            type="password"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input
            v-model="registerForm.code"
            clearable
            maxlength="6"
            placeholder="请输入验证码"
            style="width: 150px"
        ></el-input>
        <span
            class="captcha"
            @click="generateCaptcha"
            style="margin-left: 20px; cursor: pointer;"
        >
          {{ captchaText }}
        </span>
      </el-form-item>
      <el-button class="btn" type="primary" @click="register">注册</el-button>
    </el-form>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import axios from "axios";

const registerForm = ref({
  username: "",
  password: "",
  confirmPassword: "",
  code: "",
});

const registerFormRef = ref(null);
const captchaText = ref("");

const rules = {
  username: [
    {required: true, message: "请输入用户名", trigger: "blur"},
    {max: 15, message: "用户名不能超过 15 个字符", trigger: ["blur", "change"]},
  ],
  password: [
    {required: true, message: "请输入密码", trigger: "blur"},
  ],
  confirmPassword: [
    {required: true, message: "请确认密码", trigger: "blur"},
    {
      validator: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== registerForm.value.password) {
          callback(new Error("两次密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  code: [
    {required: true, message: "请输入验证码", trigger: "blur"},
    {
      validator: (rule, value, callback) => {
        if (value !== captchaText.value) {
          callback(new Error("验证码输入错误"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

const router = useRouter();

const generateCaptcha = () => {
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let captcha = "";
  for (let i = 0; i < 6; i++) {
    captcha += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  captchaText.value = captcha;
};

generateCaptcha();

const register = async () => {
  if (registerForm.value.username === "") {
    ElMessage.error("请输入用户名");
    return;
  }
  if (registerForm.value.password === "") {
    ElMessage.error("请输入密码");
    return;
  }
  if (registerForm.value.confirmPassword === "") {
    ElMessage.error("请确认密码");
    return;
  }
  if (registerForm.value.code === "") {
    ElMessage.error("请输入验证码");
    return;
  }
  try {
    const response = await axios.post("/user/register", {
      username: registerForm.value.username,
      password: registerForm.value.password,
    });
    if (response.data.data === "注册成功，请重新登录") {
      ElMessage.success("注册成功，请重新登录");
      await router.push("/currentUser");
    }
    if (response.data.data === "注册失败，用户已存在") {
      ElMessage.error("注册失败，用户已存在");
    }
  } catch (error) {
    ElMessage.error(error.message || '注册失败，请稍后重试');
  }
};
</script>

<style scoped>
.title {
  font-size: 30px;
  text-align: center;
  font-weight: bold;
}

.loginPart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  padding: 50px;
  border-radius: 15px;
  background-color: #fff; /* 白色背景 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.btn {
  transform: translate(170px);
  width: 80px;
  height: 40px;
  font-size: 15px;
}

.code-btn {
  transform: translate(20px);
  width: 90px;
  height: 40px;
  font-size: 10px;
}

.captcha {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

/* 暗黑模式下的样式 */
[data-theme="dark"] {
  background-color: #181818; /* 整体背景变为深灰色 */
  color: white; /* 字体变为白色 */
}

[data-theme="dark"] .loginPart {
  background-color: #181818; /* 登录部分背景变为深灰色 */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* 阴影效果调整为白色 */
}

[data-theme="dark"] .title {
  color: white; /* 标题字体变为白色 */
}

[data-theme="dark"] .el-form-item__label {
  color: white; /* 表单标签字体变为白色 */
}

[data-theme="dark"] .el-input__inner {
  background-color: #333; /* 输入框背景变为深灰色 */
  color: white; /* 输入框字体变为白色 */
  border: 1px solid #555; /* 输入框边框变为灰色 */
}

[data-theme="dark"] .captcha {
  color: white; /* 验证码字体变为白色 */
}

[data-theme="dark"] .btn {
  background-color: #007bff; /* 按钮背景变为蓝色 */
  color: white; /* 按钮字体变为白色 */
}

[data-theme="dark"] .btn:hover {
  background-color: #0056b3; /* 按钮悬停背景变为深蓝色 */
}
</style>